<template>
    <div>
        <RecycleScroller
                :scrollbar-x="false"
                class="scroller"
                :items="items"
                :item-size="32"
                key-field="id"
                @scroll="onScroll"
        >
            <template #default="{ item,index }">
                <div class="item" :key="item.id">
                    {{ index }} ={{ item.text }}
                </div>
            </template>
        </RecycleScroller>

        <div>
            <pre>
                node 版本：nvm use v18.16.1
                vue2版本：
                1、安装： npm install vue-virtual-scroller --save
                2、导入并注册 vue-virtual-scroller 组件：
                import Vue from 'vue';
                import VirtualScroller from 'vue-virtual-scroller';
                Vue.component('virtual-scroller', VirtualScroller);

                vue3版本：
                1、安装： npm install @juggle/vue3-virtual-scroll --save
                2、导入并注册 vue-virtual-scroller 组件：
                import { createApp } from 'vue';
                import VirtualScroller from '@juggle/vue3-virtual-scroll';

                const app = createApp(App);
                app.component('virtual-scroller', VirtualScroller);

            </pre>
        </div>
    </div>

</template>

<script>
    import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
    import {RecycleScroller} from 'vue-virtual-scroller'

    export default {
        components: {
            RecycleScroller,
        },
        data() {
            return {
                items: Array.from({length: 10000}, (_, i) => ({id: i, text: `Item ${i + 1}`})),
            };
        },
        methods: {
            onScroll(event) {
                console.log('Scroll event:', event);
            },
        },
    }
</script>

<style scoped>
    .scroller {
        height: 320px;
        width: 300px;
        border: 1px solid #ccc;
    }

    .item {
        padding: 5px;
        border-bottom: 1px solid #eee;
    }
</style>